import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:yp/helper.dart';
import 'package:yp/router.dart';
import 'package:get/get.dart';
import 'package:multi_image_picker/multi_image_picker.dart';

import 'logic.dart';
import 'state.dart';

class OpinionFeedbackPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _OpinionFeedbackPage();
  }
}

class _OpinionFeedbackPage extends State<OpinionFeedbackPage> {
  final OpinionFeedbackLogic logic = Get.put(OpinionFeedbackLogic());
  final OpinionFeedbackState state = Get.find<OpinionFeedbackLogic>().state;
  List<Asset> images = [];

  @override
  Widget build(BuildContext context) {
    return FlutterEasyLoading(
        child: GestureDetector(
      onTap: () {
        print('********************** 隐藏键盘 **********************');
        state.userFocusNode.unfocus();
      },
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          elevation: 0,
          centerTitle: true,
          title: Text(
            '意见反馈',
            style: TextStyle(
              color: Color(0xff030303),
              fontSize: 18,
            ),
          ),
          iconTheme: IconThemeData(
            color: Color(0xff333333), //修改颜色
          ),
        ),
        body: GetBuilder<OpinionFeedbackLogic>(
          builder: (logic) {
            return Container(
              color: Color(0xffF3F4F6),
              child: ListView(
                children: [
                  _opinionContentWidget(),
                  SizedBox(
                    height: setWidth(20),
                  ),
                  _phoneWidget(),
                ],
              ),
            );
          },
        ),
      ),
    ));
  }

  // 意见内容
  Widget _opinionContentWidget() {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.only(
        left: setWidth(20),
        top: setWidth(28),
        right: setWidth(20),
        bottom: setWidth(36),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '请选择您要反馈的问题类型',
            style: TextStyle(
              color: Color(0xff222222),
              fontSize: 16,
            ),
          ),
          Padding(
            padding: EdgeInsets.only(
              top: setWidth(32),
              bottom: setWidth(50),
            ),
            child: Wrap(
              spacing: setWidth(20),
              runSpacing: setWidth(26),
              children: state.labels
                  .asMap()
                  .map((key, value) {
                    return MapEntry(
                      key,
                      Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          InkWell(
                            onTap: () {
                              print(
                                  '++++++++++++++++++++++ 反馈类型key = $key ++++++++++++++++++++++');
                              if (state.feedbackCategoryIndex != key) {
                                logic.feedbackCategoryChoose(key);
                              }
                            },
                            child: Container(
                              height: setWidth(72),
                              padding: EdgeInsets.symmetric(
                                  horizontal: setWidth(20)),
                              alignment: Alignment.center,
                              constraints: BoxConstraints(
                                minWidth: setWidth(180),
                              ),
                              decoration: BoxDecoration(
                                color: state.feedbackCategoryIndex == key
                                    ? Color(0x1ADB2132)
                                    : Color(0xffF3F4F6),
                                borderRadius:
                                    BorderRadius.circular(setWidth(36)),
                              ),
                              child: Text(
                                value['group_name'],
                                style: TextStyle(
                                  color: state.feedbackCategoryIndex == key
                                      ? Color(0xffDB2132)
                                      : Color(0xff333333),
                                  fontSize: 12,
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    );
                  })
                  .values
                  .toList(),
            ),
          ),
          TextField(
            controller: state.controller,
            focusNode: state.userFocusNode,
            maxLength: 300,
            maxLines: 8,
            decoration: InputDecoration(
              fillColor: Color(0xffffffff),
              contentPadding: EdgeInsets.all(0),
              border: InputBorder.none,
              enabledBorder: InputBorder.none,
              focusedBorder: InputBorder.none,
              hintText: '请输入您的反馈意见吧，我们将努力改进！',
              hintStyle: TextStyle(
                color: Color(0xff999999),
                fontSize: 14,
              ),
            ),
          ),
          SizedBox(
            height: setWidth(14),
          ),
          Wrap(
            spacing: setWidth(20),
            runSpacing: setWidth(26),
            children: _getPhotoWidget(),
          ),
        ],
      ),
    );
  }

  List<Widget> _getPhotoWidget() {
    var items = state.images
        .asMap()
        .map((key, e) => MapEntry(key, _getPhotoItemWidget(key, e)))
        .values
        .toList();
    if (items.length < 9) {
      items.add(
        InkWell(
          onTap: () async {
            print('******************* 请选择图片 *******************');
            logic.pickImage();
          },
          child: Image.asset(
            'assets/images/choose_images.png',
            width: setWidth(100),
            height: setWidth(100),
            fit: BoxFit.cover,
          ),
        ),
      );
    }
    return items;
  }

  Widget _getPhotoItemWidget(index, data) {
    return Container(
      width: setWidth(100),
      height: setWidth(100),
      child: Stack(
        children: [
          Positioned(
            child: Image.memory(
              data,
              fit: BoxFit.cover,
            ),
            width: setWidth(100),
            height: setWidth(100),
          ),
          Positioned(
            child: GestureDetector(
                onTap: () {
                  logic.deletePhoto(index);
                },
                child: Icon(
                  Icons.clear,
                  color: Colors.white,
                  size: setWidth(30),
                )),
            right: 0,
          )
        ],
      ),
    );
  }

  // 手机号
  Widget _phoneWidget() {
    return Column(
      children: [
        Container(
          color: Colors.white,
          width: MediaQuery.of(context).size.width,
          height: setWidth(88),
          padding: EdgeInsets.symmetric(horizontal: setWidth(32)),
          alignment: Alignment.centerLeft,
          child: Text(
            state.mobile,
            style: TextStyle(
              color: Color(0xff333333),
              fontSize: 14,
            ),
          ),
        ),
        Padding(
          padding: EdgeInsets.only(
            left: setWidth(20),
            top: setWidth(114),
            right: setWidth(20),
            bottom: setWidth(40),
          ),
          child: InkWell(
            onTap: () {
              print('************* 提交反馈点击事件 *************');
              logic.submitAction();
            },
            child: Container(
              width: setWidth(710),
              height: setWidth(90),
              decoration: BoxDecoration(
                color: Color(0xffDB2132),
                borderRadius: BorderRadius.circular(setWidth(45)),
              ),
              alignment: Alignment.center,
              child: Text(
                '提交反馈',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                ),
              ),
            ),
          ),
        ),
        InkWell(
          onTap: () {
            print('************* 反馈历史点击事件 *************');
            Get.toNamed(RouteConfig.feedbackHistory);
          },
          child: Container(
            width: setWidth(710),
            height: setWidth(90),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(setWidth(45)),
              border: Border.all(
                color: Color(0xffcccccc),
                width: setWidth(1),
              ),
            ),
            alignment: Alignment.center,
            child: Text(
              '反馈历史',
              style: TextStyle(
                color: Color(0xff666666),
                fontSize: 18,
              ),
            ),
          ),
        ),
        SizedBox(
          height: Get.bottomBarHeight + setWidth(40),
        )
      ],
    );
  }
}
